body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background: #9bd9cf;
    color: #fff;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ball {
    position: relative;
    width: 184px;
    height: 184px;
    background: linear-gradient(to right, #454545 10%, #242424 40%);
    border-radius: 50%;
    box-shadow: 24px 24px 48px -16px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;

    &:hover {
        transform: rotateZ(10deg) scale(1.1);
    }

    &:before,
    &:after {
        position: absolute;
        content: '';
        z-index: 2;
        width: 200px;
        height: 200px;
        top: -8px;
        left: -8px;
        border-radius: 50%;
        background: #0003;
    }

    &:before {
        background: linear-gradient(to right, #ff3050 30%, #963050 80%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 45%, 0% 45%);
    }

    &:after {
        background: linear-gradient(to right, #fff 30%, #898989 80%);
        clip-path: polygon(0% 55%, 100% 55%, 100% 100%, 0% 100%);
    }

    .inside {
        position: absolute;
        z-index: 3;
        width: 50px;
        height: 50px;
        left: 55px;
        top: 55px;
        background: #dbdb2c;
        border: 12px solid #242424;
        border-radius: 50%;
    }
}
